<template>
	<view>
		<!-- 标题-->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="content">提交订单</block>
		</cu-custom>
		<!-- 收货信息 -->
		<view class="solids-bottom padding-xs flex align-center  bg-white fixed">
			<view class="flex-sub text-center">
				<view v-if="defAddrs==''" class="solid-bottom text-xsl padding">
					<button class="cu-btn round line-black" @click="showModal" data-id="ChooseModal"> 添加收货信息</button>
				</view>
				<view v-if="defAddrs!=''" class="padding text-lg ">

					<view class="flex solid-bottom padding justify-between">
						<view class=" padding-sm radius">
							{{defAddrs.shippingUser}}-{{defAddrs.shippingPhone}}-{{defAddrs.province}}-{{defAddrs.city}}-{{defAddrs.address}}
						</view>
						<view class="padding-sm  radius" @click="showModal" data-id="ChooseModal">...</view>
					</view>


				</view>
			</view>
		</view>
		<!-- 购物商品 -->


		<view class="cu-list menu-avatar">

			<view class="cu-item cur" v-for="(item,index)  in cartList " :key="index">
				<view class="cu-avatar radius lg" :style="{'background-image':'url('+imageSrc+item.skuImage+');'}">
					<view class="cu-tag badge"></view>
				</view>
				<view class="content">
					<view>
						<view class="text-cut">{{item.skuName}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view>
							<text class=" margin-left  my-margin-right   padding-xs  "> x{{item.skuCount}}</text>
						</view>


					</view>

				</view>
				<view class="action">
					<view class="text-grey text-xs text-price">{{item.skuPrice/100}}</view>
					<view class="text-price">
						{{item.skuPrice/100*item.skuCount}}
					</view>
				</view>
			</view>
		</view>
		
		<!--发票 金额   备注区域 -->
		<view class="cu-list menu  solid-bottom " >
						<view class="cu-item arrow" >
							<view class="content">
								<text class="cuIcon-circlefill text-grey"></text>
								<text class="text-grey">发票</text>
							</view>
						</view>
						
		</view>	
										
		<view class="cu-form-group">
					<textarea maxlength="-1"  placeholder="买家留言"></textarea>
		</view>			
		
		
		<!--加载条 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/logo.png" mode="aspectFit"></image>
			<view class="gray-text">订单生成中...</view>
		</view>







		<!-- 底部支付状态条-->
		<view v-if="cartList.length>0" class="cu-bar bg-white tabbar border  foot shop">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="action">
				实际金额:
				<text class="text-lg text-price text-red">{{totalPrice}} </text>
			</view>

			<view class="btn-group">
				<button class="cu-btn bg-red   shadow-blur" @click="handleToPay">立即支付</button>
			</view>
		</view>


		<!-- 底部弹框 地址选择框 -->
		<!-- 加入购物车弹框-->
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					
				</view>

				<!-- 显示地址区域 -->

				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-right">
						<view class="cu-item" v-for="(item,index) in addrs" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<radio style="transform:scale(0.5)" class="round" :checked="item.isDefault==1?true:false" :value="item.id"></radio>
								<view v-if="item.isDefault==1" class='cu-tag light bg-pink'>默认</view>
								<view class="flex-sub">{{index}}-{{item.shippingUser}}-{{item.shippingPhone}}-{{item.province}}-{{item.city}}-{{item.address}}</view>

							</label>
						</view>
					</view>
				</radio-group>



				<view class="flex padding">
					<view class="flex-sub padding-xs">
						<button class="cu-btn round  line-blue" @click="handleDefaultAddress">确定及设置默认</button>
					</view>
					<view class="flex-sub padding-xs">
						<button class="cu-btn round  line-blue"  @click="toAddrese"  >添加新地址</button>
					</view>
				</view>


			</view>
		</view>















	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [], //只存储已经决定购买的商品
				cartId: '',
				imageSrc: this.$global.imageSrc,
				modalName: null,
				addrs: [], //收货信息 （所有的地址信息）
				addrId: '', //更换的收货地址的Id
				defAddrs: '', //默认的地址信息
				loadModal:false
			}
		},
		onLoad() {
			//查询购买商品 
			this.init()
			this.initDefaultAddr();
		},

		computed: {
			totalCount: function() {
				var c = 0;
				this.cartList.forEach(v => {
					c += v.skuCount
				})
				return c;
			},
			totalPrice: function() {
				var p = 0;
				this.cartList.forEach(v => {
					p += v.skuCount * v.skuPrice / 100;
				});
				return p;
			}
		},
		methods: {
			//查询购买商品
			init: function() {
				this.$api.__api__cart_list(this.$global.userinfo.id).then((res) => {
					//获取购物车ID
					this.cartId = res.data.id;
					//购物车信息
					//this.cartList = res.data.items;
					var list = res.data.items;
					for (let i = 0; i < list.length; i++) {
						if (list[i].selected == 1) {
							this.cartList.push(list[i]);
						}
					}

				})

			},
			initDefaultAddr: function() {
				//初始化默认地址
				this.$api.__api__listAddrs(this.$global.userinfo.id).then(res => {
					//把地址存储在这个数组中 ，但是要找出默认地址
					let addrs = res.data;
					for (let i = 0; i < addrs.length; i++) {
						if (addrs[i].isDefault == 1) {
							this.defAddrs = addrs[i];
							this.addrId = addrs[i].id;
							console.log("-----------------------")
							console.log(this.defAddrs)
							break;
						}
					}
					//把所有地址存储
					this.addrs = res.data;


				})



			},
			showModal: function(e) {
				//查询顾客所有收货地址信息
				this.modalName = e.currentTarget.dataset.id;

			},
			hideModal: function() {
				this.modalName = null
			},
			RadioChange: function(e) {
				//当默认地址改变成不是默认地址的选项时候 触发事件
				this.addrId = e.detail.value

			},
			toAddrese: function() {
				//我监听你回来事件
				  uni.$once("address",(addr)=>{
					  //追加一個信息
					this.initDefaultAddr();
					  
				  });
				
				//跳转添加地址页面
				uni.navigateTo({
					url:'../address/address'
				})
				
			},
			//重新设置默认地址
			handleDefaultAddress: function() {
				//1、设置默认地址
				console.log(this.defAddrs.id)
				console.log(this.addrId)

				if (this.addrId != this.defAddrs.id) {
					this.$api.__api__wxUpdateDefaultAddr({
						addrId: this.addrId,
						customerId: this.$global.userinfo.id
					}).then(res => {
						//重新更新数据
						this.addrs = res.data;
						//重新更新默认地址
						let addrs = res.data;
						for (let i = 0; i < addrs.length; i++) {
							if (addrs[i].isDefault == 1) {
								this.defAddrs = addrs[i];
								break;
							}
						}

						//关闭弹窗
						this.modalName = null;
					})

				} else {
					uni.showToast({
						title: '本身已经是默认了'
					})
				}

				//2、确定选了此地址作为本次收货的地址


			},
			handleToPay:function(){
				//先显示加载条
				this.loadModal=true;
				//调用生成订单接口
				var items=[];
				this.cartList.forEach(v=>{
					items.push({count:v.skuCount,skuId:v.skuId})
				});
				//
				//默认收货信息 （包含customerId）
				this.defAddrs['items']= items;
				this.defAddrs['orderMoney'] = this.totalPrice;
				this.defAddrs['status'] = 1;
				
				//延时器
				setTimeout(() => {
					this.$api.__api__orders(this.defAddrs).then(res=>{
						this.loadModal=false;
						console.log(JSON.stringify(res));
						uni.redirectTo({
							url:'../success/success?orderId='+res.data
						})
					})
								
				}, 2000);
				
				
				
				
			
				
				//成功之后重定向到成功
				
			}


		}
	}
</script>

<style>

</style>
